<template>
    <div class="univariate-analysis">
        <title-bar title="图形化展示"></title-bar>
        <div class="charts-input">
            <span class="tips-label">特征列</span>
            <el-select filterable  v-model="filed" @change="changeFiled" placeholder="请选择字段">
                <el-option v-for="(item, i) in filedList" :key="i" :label="item['名称']" :value="item['名称']">
                    <span style="float: left">{{ item['名称'] }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item['特征类型'] }}</span>
                </el-option>
            </el-select>
            <el-tag class="type">{{currenItem['特征类型']}}</el-tag>
        </div>
        <el-tabs v-model="activeName" type="border-card" @tab-click="changeFiled">
            <template v-for="(value, key, index) in tabs">
                <el-tab-pane :key="index" :label="key" :name="key">
                    <component v-if="activeName === key" :is="value"></component>
                </el-tab-pane>
            </template>
        </el-tabs>
        <title-bar title="字段分析统计"></title-bar>
        <field-statistics></field-statistics>
    </div>
</template>
<script>
import {
    mapGetters, mapMutations
} from 'vuex'
import TitleBar from '@/components/TitleBar'
import Histogram from './Histogram'
import Boxplot from './Boxplot'
import PieChart from './PieChart'
import BarChart from './BarChart'
import PercentileFigure from './PercentileFigure'
import FieldStatistics from './FieldStatistics'
export default {
    name: 'UnivariateAnalysis',
    components: { TitleBar, FieldStatistics },
    computed: {
        ...mapGetters({
            analysisReportData: 'common/getAnalysisReportData'
        })
    },
    data () {
        return {
            currenItem: {},
            filed: '',
            filedList: [],
            activeName: '直方图',
            tabs: {},
            components: {
                '连续型': {
                    '直方图': Histogram,
                    '箱线图': Boxplot,
                    '条形图': BarChart,
                    '百分位': PercentileFigure
                },
                '离散型': {
                    '直方图': Histogram,
                    '饼图': PieChart
                }
            }
        }
    },
    created () {
        this.filedList = this.analysisReportData.content
        this.filed = this.filedList[0]['名称']
        this.changeFiled(this.activeName)
    },
    methods: {
        ...mapMutations({
            setUnivariateData: 'common/setUnivariateData'
        }),
        changeFiled () {
            let item = {}
            if (this.filed) {
                item = this.filedList.filter(v => v['名称'] === this.filed)[0]
                this.currenItem = item
                let type = item['特征类型']
                this.tabs = this.components[type]
                if (type === '连续型' && this.analysisReportData['label']) {
                    delete this.tabs['百分位']
                }
                if (!this.tabs[this.activeName]) {
                    this.activeName = '直方图'
                    this.changeFiled('直方图')
                }
            }
            this.setUnivariateData(item)
        }
    }
}
</script>
<style lang="less">
    .univariate-analysis {
        .tips-label {
            margin-right: 5px;
        }
        .el-tabs--border-card {
            box-shadow: none;
        }
        .charts-input {
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            .type {
                margin-left: 10px;
            }
        }
        .tabs {
            display: flex;
            justify-content: center;
            padding-bottom: 20px;
            .el-radio-button__inner {
                width: 80px;
            }
        }
    }
</style>
